<!-- 练习 exercise.html -->
{% extends 'paper/base.html' %}
{% block title %}回忆{% endblock %}
{% block content %}
    <h3><span class="badge badge-primary badge">回忆Recall</span></h3>
    <label for="id_subject"><span class="badge badge-info">科目</span></label>
    <div class="row">
        <div class="col-3">
            <select id="id_course" class="form-control" style="margin-bottom: 10px">
                <option value="数学">数学</option>
                <option value="物理">物理</option>
                <option value="化学">化学</option>
                <option value="语文">语文</option>
                <option value="英语">英语</option>
                <option value="政治">政治</option>
            </select>
        </div>
        <div class="col-6">
            <select id="id_subject" class="form-control" name="subject">
            </select>
        </div>
        <div class="col-3">
            <button class="btn btn-outline-primary" id="btn_query">搜索</button>
        </div>
    </div>
    <!-- 表单 -->
    <form id="ff">
        {% for q in qs %}
            <div class="card" id="{{ q.pk }}">
                <div class="card-body">
                    <div class="row">
                        <div class="col-auto"><span class="badge badge-info badge">题目</span></div>
                    </div>
                    <div class="row">
                        <div class="col-auto">
                            <img src="{{ q.question }}"/>
                        </div>
                    </div>
                    {#    选择 是否会 #}
                    <div class="row">
                        <div class="col-auto">记忆</div>
                        <div class="col-auto">
                            <label for="mark_s{{ q.pk }}"><span class="badge badge-success">成功</span></label>
                            <input type="checkbox" id="mark_s{{ q.pk }}" name="mark" value="success_{{ q.pk }}"/>
                        </div>
                        <div class="col-auto">
                            <label for="mark_f{{ q.pk }}"><span class="badge badge-danger">失败</span></label>
                            <input type="checkbox" id="mark_f{{ q.pk }}" name="mark" value="failure_{{ q.pk }}"/>
                        </div>
                    </div>

                    {% if q.answer != '' %}
                        <div class="row">
                            <div class="col-auto" id="collapse-answer">
                                <img src="{{ q.answer }}"/>
                            </div>
                        </div>
                    {% endif %}
                    <!-- 如果有解析 -->
                    {% if q.analyze != '' %}
                        <div class="row" style="margin-top: 6px">
                            <div class="col-auto" id="collapse-analyze">
                                <img src="{{ q.analyze }}"/>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
            </form>
            <div style="margin-top: 10px"></div>
        {% endfor %}
{% endblock %}
{% block script %}
    <script src="/static/easytimer/easytimer.js"></script>
    <script>
        $(document).ready(function () {
            let course = '{{ course }}';
            let subject = '{{ subject }}';
            if (course !== '')
                $('#id_course').val(course);
            if (subject !== '')
                $('#id_subject').val(subject);

            $('input[name=mark]').click(function () {
                // $(this).remove();
                let s = this.value.split('_');
                $('#' + s[1]).remove();
                $.post(
                    '{% url  "paper:recall" %}',
                    {
                        recall: this.value,
                        tag: this.text
                    },
                    function (data) {

                    }
                );
            });

            let id_course = $('#id_course');
            // 初始化选项
            let subjects = {{ subjects|safe }};
            set_option(subjects);

            // 函数
            function set_option(subjects) {
                let course = id_course.val();
                let subject = $('#id_subject');
                subject.html('');
                $.each(subjects, function (i, v) {
                    if (v.title === course) {
                        // console.log(v.subjects);
                        let html = '';
                        $.each(v.subjects, function (i, v) {
                            if (v === '')
                                console.log('v is empty');
                            html += `<option value="${v}">${v}</option>`;
                        });
                        subject.append(html);
                    }
                });
            }

            // 课程变化
            id_course.change(function () {
                set_option(subjects);

            });

            // 选择科目
            $('#btn_query').click(function () {
                window.location.href = '{% url  "paper:recall" %}?course=' + $('#id_course').val()
                    + '&subject=' + $('#id_subject').val();
            });

        });
    </script>

{% endblock %}
